import { messages } from "share/common";
import React, { Component } from "react";
import "styles/row-card/index.scss";
import RowCardUI from "./row-card.UI";
import RowCardHeader from "./row-card-header";
import RowCardFooter from "./row-card-footer";
import { Button, Icon, Spin, Tooltip } from "antd";
import { isFunction } from "lodash-es";

class RowCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      collapse: false,
      searchStatus: false,
      indeterminate: false,
      checkAll: false,
      checkedList: [],
    };
  }

  componentDidMount() {
    const { onRef } = this.props;
    onRef && onRef(this);
  }

  // 收缩处理
  handleCollapsed = () => {
    this.setState({ collapse: !this.state.collapse });
    this.props.onCollapsed && this.props.onCollapsed(!this.state.collapse); // 收缩按键事件监听
  };

  // 显示筛选组件控制
  handleSearch = () => {
    this.setState({ searchStatus: !this.state.searchStatus });
  };

  // 点击单个checkBox 时抛出的方法
  handleCheckSelect = (val, record, index) => {
    this.props.onSelect && this.props.onSelect(record, val, index);
  };

  // checkBox group的onchange事件， 默认第一个参数就是选中的列表
  handleRowSelect = (values) => {
    const valuesTemp = values.map((item) => JSON.parse(item));
    const {
      rowSelection: { onChange },
      dataSource = [],
    } = this.props;
    // 得到选中的values 值和  items 值
    const obj = valuesTemp.reduce(
      (temp, item) => {
        temp.selectedRowKeys.push(item.selectedRowKeys);
        temp.selectedRows.push(item.selectedRows);
        return temp;
      },
      {
        selectedRowKeys: [],
        selectedRows: [],
      }
    );
    this.setState({
      checkedList: values,
      indeterminate: !!values.length && values.length < dataSource.length,
      checkAll: values.length === dataSource.length,
    });
    onChange && onChange(obj.selectedRowKeys, obj.selectedRows);
  };

  // 点击全选时的抛出方法
  handleAllChange = (e) => {
    const { onSelectAll, dataSource = [] } = this.props;
    const status = e.target.checked;
    onSelectAll && onSelectAll(status, status ? dataSource : []);
    this.setState({
      checkAll: status,
      indeterminate: false,
      checkedList: status ? this.checkBoxValues : [],
    });
  };

  // 单单的checkBox组件只能拿到对应的字段值， 拿不到对应的item，这个是把字段值和item强关联起来
  get checkBoxValues() {
    const { dataSource = [], rowKey } = this.props;
    return dataSource.map((item, index) => {
      // 每个checkBox对应的value值
      const checkBoxValue = rowKey ? (isFunction(rowKey) ? rowKey(item, index) : item[rowKey]) : item.key || index;
      // 将checkBox的value值转换成字符串， 其中包含item 和  item.key
      return JSON.stringify({ selectedRowKeys: checkBoxValue, selectedRows: item });
    });
  }

  render() {
    const {
      onAdd, // 新增事件监听
      addButtonText, //新增按钮文案配置
      addButtonProps, // 新增按钮的Props配置

      notice, // 默认规则文案
      onNotice, // 默认规则点击监听

      rowSelection, // 有复选框的话，配置这个

      footer, // 底部按钮需要自定义的时候，必须传组件
      onStart, // 启用按钮事件监听
      startButtonText, // 启用按钮
      startButtonProps, // 启用按钮Props配置
      onForbid, // 禁用按钮事件监听
      forbidButtonText, // 禁用按钮文案修改
      forbidButtonProps, // 禁用按钮的Props配置
      onDelete, // 删除按钮事件监听
      deleteButtonText, // 删除按钮文案修改
      deleteButtonProps, // 删除按钮Props 配置

      search, // 如果有筛选框的时候，自定义的筛选组件，必须传组件
      header, // 头部按钮需要自定义的时候， 必须传组件

      rows = [], // 每一行中每一小行的字段配置
      dataSource = [], // 数据源
      rowKey, // 每一行的key， 同时也对应复选框选中的值, 一定要确保是函数是返回的值在每一行中唯一， 或者对应的key 字段所得到的值唯一

      onRowCopy, // 每行的删除icon事件监听
      onRowEdit, // 每行的编辑icon事件监听
      onRowDel, // 每行的删除icon事件监听
      onRowSelect, // 每行的选中事件监听

      loading, // 控制是否有loading
      height, // 整体高度设置
    } = this.props;
    const {
      collapse,
      searchStatus,
      indeterminate, // 多选框半选状态
      checkAll, // 全选状态
      checkedList, // 选中列表
    } = this.state;
    return (
      <Spin spinning={!!loading}>
        <div className={`row-card-container ${collapse ? "collapse" : ""}`} style={{ height }}>
          {collapse && (
            <div>
              <Icon type="menu-unfold" onClick={this.handleCollapsed} className="icon" />
              <Tooltip title={addButtonText || messages("common-1.key1404") /*+ 新增按键*/} placement="right">
                <div className="icon" onClick={onAdd}>
                  +
                </div>
              </Tooltip>
            </div>
          )}
          {!collapse && (
            <div>
              <RowCardHeader
                addText={addButtonText}
                onAdd={onAdd}
                addButtonProps={addButtonProps}
                notice={notice}
                onNotice={onNotice}
                onCollapsed={this.handleCollapsed}
                search={search}
                onSearch={this.handleSearch}
                header={header}
              />
              {dataSource.length === 0 && (
                <div className="no-data">
                  <Button {...{ type: "primary", onClick: { onAdd }, ...addButtonProps }}>
                    {addButtonText || messages("common-1.key1404") /*+ 新增按键*/}
                  </Button>
                </div>
              )}
              {dataSource.length > 0 && (
                <RowCardUI
                  rowSelection={rowSelection}
                  searchStatus={searchStatus}
                  search={search}
                  rows={rows}
                  dataSource={dataSource}
                  rowKey={rowKey}
                  onRowEdit={onRowEdit}
                  onRowDel={onRowDel}
                  onRowCopy={onRowCopy}
                  onChange={this.handleRowSelect}
                  onSelect={this.handleCheckSelect}
                  onRowSelect={onRowSelect}
                  checkedList={checkedList}
                  checkBoxValues={this.checkBoxValues}
                />
              )}
              {rowSelection && dataSource.length > 0 && (
                <RowCardFooter
                  footer={footer}
                  onStart={onStart}
                  startText={startButtonText}
                  startButtonProps={startButtonProps}
                  onForbid={onForbid}
                  forbidText={forbidButtonText}
                  forbidButtonProps={forbidButtonProps}
                  onDelete={onDelete}
                  deleteText={deleteButtonText}
                  buttonProps={deleteButtonProps}
                  indeterminate={indeterminate}
                  checkAll={checkAll}
                  onAllChange={this.handleAllChange}
                  checkedList={checkedList}
                />
              )}
            </div>
          )}
        </div>
      </Spin>
    );
  }
}

export default RowCard;
